<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width: 500px;
            height: 90px;
        }
    </style>
    <script>
        function f() {
            var xm = document.getElementById("xm").value;
            var nl = document.getElementById("nl").value;
            var arr = document.getElementsByTagName("tr");
            var brr,id;
            for (var i = 0; i <arr.length ; i++) {
                brr = arr[i];
            }
            id = parseInt(brr.innerText)+1;
            var sj = "<td>"+id+"</td><td class='n'>"+xm+"</td><td>"+nl+"</td><td><button onclick='d1("+id+")'>删除</button></td>";
            document.getElementById('bg').innerHTML += sj;

        }
        function f1() {
            var ss = document.getElementById('ss').value;
            var arr = document.getElementsByClassName("n");
           if (ss.length>1){
               for (var i = 0; i < arr.length; i++) {
                   if (arr[i].innerHTML==ss){
                       var a =arr[i].parentNode;
                       a.style.background = "green";
                   }else {
                       var a =arr[i].parentNode;
                       a.style.background = "white";
                   }
               }
           }else {
               for (var i1 = 0; i1 < arr.length; i1++) {
                   if (arr[i1].innerHTML.charAt(0)==ss){
                       var a1 = arr[i1].parentNode;
                       a1.style.background = "green";
                   }else {
                       var a1 = arr[i1].parentNode;
                       a1.style.background = "white";
                   }
               }
           }
        }
        function d1(val) {
            var arr = document.getElementById("bg");
            for (var i = 0; i <arr.rows.length ; i++) {
                var num = parseInt(arr.rows[i].cells[0].innerHTML);
                if (num==val){
                    arr.deleteRow(i);
                }
            }
        }
    </script>
</head>
<body>
    <button>排序</button>
    <br>
    <input type="text" placeholder="请输入你要搜索的姓名..." id="ss"><button style="margin-left: 3px" onclick="f1()">搜索</button>
    <br>
    <br>
    姓名:<input type="text" id="xm">年龄:<input type="text" id="nl"><button style="margin-left: 3px" onclick="f()">添加</button>
    <br>
    <table border="1" cellspacing="2" cellpadding="1" id="bg">
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
        <tr>
            <td>1</td>
            <td class="n">张三</td>
            <td>12</td>
            <td><button onclick="d1('1')">删除</button></td>
        </tr>
        <tr>
            <td>2</td>
            <td class="n">刘备</td>
            <td>30</td>
            <td><button onclick="d1('2')">删除</button></td>
        </tr>
    </table>
</body>
</html>